<template>
  <div class="list-item">
    <div class="left">
      <div class="title"><span></span>{{ item.title }}</div>
      <div class="text"><span>机构状态：</span>{{ item.state }}</div>
      <div class="text"><span>所属区域：</span>{{ item.area }}</div>
      <div class="text"><span>法人代表人：</span>{{ item.person }}</div>
      <div class="text"><span>机构类型：</span>{{ item.kind }}</div>
    </div>
    <PopupRightRwm class="right">
      <template v-slot:control>
        <div class="image-wrap">
        <img class="image" :src="item.image" alt="" />
      </div>
      <div class="text">二维码查看</div>
      </template>
      
      <div class="image-wrap big">
        <img class="image" :src="item.image" alt="" />
      </div>
    </PopupRightRwm>
  </div>
</template>

<script>
import PopupRightRwm from '../PopupRightRwm'

export default {
  name: 'ListItem',
  components: { PopupRightRwm },
  props: {
    item: { type: Object, default: () => ({}) }
  }
}
</script>

<style lang="scss" scoped>
.list-item {
  display: flex;
  align-items: center;
  font-size: 32px;
  padding: 24px;
  border: 2px solid #ccc;
  border-radius: 32px;

  .left {
    margin-right: 32px;

    .text {
      font-size: 24px;
      color: #7f7f7f;
      margin-top: 16px;
      /*此时first-child不起作用，是因为.tap_con的父元素win的第一个子元素是.top，此时找到第一个子元素，但是其并不是.tab_con*/
      &:nth-child(2) {
        margin-top: 32px;
      }
    }
  }

  .right {
    .image-wrap {
      width: 120px;
      height: 120px;

      &.big {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 100px;
        box-sizing: border-box;
      }

      .image {
        width: 100%;
      }
    }

    .text {
      font-size: 24px;
    }
  }
}
</style>